@import "base.scss";
@import "mixin.scss";

//SY-subscript
.SY-subscript {
    width: 95.8 * $fontSize10;
    font-weight: 300;
    .navTab {
        height: 6.2 * $fontSize10;
        line-height: 6.2 * $fontSize10;
        padding: 0 3 * $fontSize10;
        font-size: $fontSize16;
        margin-bottom: $fontSize10;
        background: $colorfff;
        .item {
            margin-right: 3.5 * $fontSize10;
            a {
                display: block;
                height: 6 * $fontSize10;
                border-bottom: $fontSize10 / 5 solid $colorfff;
                &:hover {
                    color: $color000;
                }
            }
            &.active a {
                color: $color000;
                border-color: $color000;
            }
        }
    }
    //buildSubscript
    .buildSubscript {
        > div {
            background: $colorfff;
        }
        .reward {
            width: 56.6 * $fontSize10;
            padding: 2.5 * $fontSize10 3 * $fontSize10 3 * $fontSize10;
        }
        .tabNav {
            margin-bottom: $fontSize20;
        }
        .tabBtn {
            height: 4 * $fontSize10;
            line-height: 4 * $fontSize10;
            a {
                width: 7 * $fontSize10;
                text-align: center;
                font-size: $fontSize14;
                &:hover {
                    color: $color000;
                }
                &.active {
                    color:$color000;
                    font-weight: 500;
                    cursor: default;
                }
            }
            .line {
                width: $fontSize10 / 10;
                height: $fontSize18;
                vertical-align: top;
                margin-top: $fontSize12;
                background: $colore5;
            }
        }
        .createBtn {
            width: 11.2 * $fontSize10;
            height: 4 * $fontSize10;
            line-height: 4 * $fontSize10;
            font-size: $fontSize16;
            @include border($fontSize10 / 10,solid,$theme);
            @include link-colors($theme,$colorfff);
            @include link-posColor($colorfff,$theme);
            i {
                font-size: $fontSize18;
                margin: $fontSize12 $fontSize12 / 2 0 0;
                vertical-align: top;
            }
        }
        .newReward {
            margin-bottom: $fontSize20;
            &.shield {
                background: #f5f5f5;
            }
        }
        .topBox {
            height: 4.5 * $fontSize10;
            line-height: 4.5 * $fontSize10;
            padding: 0 2.5 * $fontSize10;
            font-size: $fontSize14;
            color: $color333;
            border-bottom: $fontSize10 / 10 solid $colore5;
            a {
                margin-left: $fontSize16;
                &:hover {
                    color: $color000;
                }
            }
        }
        .msgBox {
            padding: $fontSize18 $fontSize14 + 1;
            .fl {
                width: 47 * $fontSize10;
                > p {
                    font-size: $fontSize14;
                    margin-bottom: $fontSize16 / 2;
                    &:last-child {
                        margin-bottom: 0;
                    }
                    span {
                        font-weight: 500;
                    }
                }
            }
            .description {
                font-size: $fontSize14;
                line-height: $lineHeight - 0.1;
                margin: 0 0 $fontSize12;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .price {
                font-size: $fontSize16;
                font-weight: 500;
                color: $colorred;
            }
        }
        .emptyInfo {
            padding: 8 * $fontSize10 0;
            font-size: $fontSize14;
            color: $colorab;
            .icon {
                width: 111px;
                height: 105px;
                margin: 0 auto 15px;
                background: url("../img/icons/info.png") no-repeat 0 0;
            }
        }
        .help {
            width:27.2 * $fontSize10;
            padding:2.5 * $fontSize10;
            .helpIcon {
                font-size: $fontSize16;
                color: $color666;
                margin-bottom: $fontSize12;
                i {
                    font-size: $fontSize20;
                    margin-right: $fontSize10 / 2;
                    line-height: $lineHeight;
                }
            }
            li {
                list-style: circle inside;
                font-size: $fontSize14;
                line-height: $lineHeight;
                margin:0 0 $fontSize10 $fontSize10;
                a {
                    &:hover {
                        color: $color000;
                    }
                }
            }
        }
    }
    //mineSubscript && subscriptMine
    .mineSubscript,.subscriptMine {
        padding: 0 3 * $fontSize10 3 * $fontSize10;
        background: $colorfff;
        .headBox {
            padding:2 * $fontSize12 0 $fontSize20;
            font-size: $fontSize14;
            .totalCount {
                .num {
                    font-weight: 700;
                    color: $colorred;
                }
            }
            .fl {
                margin-right: 5.2 * $fontSize10;
                color: $color666;
                > a {
                    &:hover {
                        color: $color000;
                    }
                    i {
                        font-size: $fontSize16;
                        margin-left: $fontSize10 / 2;
                    }
                }
            }
            .select {
                display: none;
                top: 2 * $fontSize12;
                right: - $fontSize16;
                text-align: center;
                background: $colorfff;
                @include boxShadow(0 $fontSize10 / 5 $fontSize12 rgba(0,0,0,.16));
                z-index: 9;
                .item {
                    height: 3.5 * $fontSize10;
                    line-height: 3.5 * $fontSize10;
                    width: 9 * $fontSize10;
                    &.active a {
                        color: $theme;
                    }
                }
                a {
                    display: block;
                    &:hover {
                        color: $color000;
                    }
                }
            }
        }
        .titleBox {
            height: 4 * $fontSize10;
            line-height: 4 * $fontSize10;
            font-size: $fontSize14;
            color: $color666;
            background: #f2f4f6;
        }
        .item {
            height: 5.4 * $fontSize10;
            line-height: 5.4 * $fontSize10;
            font-size: $fontSize14;
            border-top: $fontSize10 / 10 solid $colore5;
            &:first-child {
                border-top: 0;
            }
        }
        p {
            padding: 0 $fontSize10;
        }
        .nickName {
            width: 11 * $fontSize10;
        }
        .predictItem {
            width: 14.5 * $fontSize10;
        }
        .classify {
            width: 8 * $fontSize10;
        }
        .price {
            width: 10 * $fontSize10;
        }
        .timeLimit {
            width: 25 * $fontSize10;
            span {
                margin: 0 $fontSize12 / 3;
            }
        }
        .status {
            width: 7 * $fontSize10;
        }
        .emptyInfo {
            font-size: $fontSize14;
            color: $colorab;
            margin: 9 * $fontSize10 0 6 * $fontSize10 0;
            .icon {
                width: 11.1 * $fontSize10;
                height: 10.5 * $fontSize10;
                margin: 0 auto 1.5 * $fontSize10;
                background: url("../img/icons/info.png") no-repeat 0 0;
            }
        }
        .loading {
            height: 13.5 * $fontSize10;
            line-height: 13.5 * $fontSize10;
            font-size: $fontSize16;
            color: $colorab;
            margin: 9 * $fontSize10 0 6 * $fontSize10 0;
        }
    }
}
